<template>
    <div class="login">
        <header>
            <i @click="back()" class="cubeic-back back-btn"></i>
        </header>
        <h1>快捷登录</h1>
        <div class="form">
            <div class="input-wrapper">
                <cube-input v-model="phone" placeholder="请输入手机号"></cube-input>
                <i class="cubeic-mobile-phone"></i>
            </div>
            <div class="input-wrapper">
                <cube-input v-model="code" placeholder="请输入短信验证码"></cube-input>
                <i class="cubeic-message"></i>
            </div>
            <cube-button :disabled="vcodeBtnDisabled" @click="getVcode()">获取验证码{{countdown > 0? `(${countdown})` : ''}}</cube-button>
            <cube-button @click="login()">登陆</cube-button>
        </div>
    </div>
</template>
<script>
import { Input, Button } from 'cube-ui'
import { setInterval } from 'timers';
export default {
    components: {
        Input,
        Button
    },
    data() {
        return {
            phone: '',
            code:'',
            vcodeBtnDisabled: false,
            countdown: 0
        }
    },
    methods: {
        back() {
            this.$router.back();
        },
        getVcode() {
            this.$http.post('/sendVcode', {phone: this.phone}).then((response) => {})
            const toast = this.$createToast({
                time: 1000,
                mask: true,
                type: 'correct',
                txt: '发送成功'
            })
            toast.show()
            this.vcodeBtnDisabled = true;
            this.countdown = 59;
            this.beginCountDown();
        },
        login() {
            this.$http.post('/login', {phone: this.phone, code: this.code}).then((response) => {
                if(response.data.result) {
                    let userId = response.data.content;
                    this.$store.commit('setUserId', userId)
                    localStorage.setItem('userId',userId)
                    this.$router.push('personal')
                }else {
                    const toast = this.$createToast({
                        time: 1000,
                        mask: true,
                        type: 'error',
                        txt: response.data.content
                    })
                    toast.show()
                }
            })
        },
        beginCountDown() {
            setInterval(() => {
                if(this.countdown > 0) {
                    this.countdown --
                }else {
                    this.vcodeBtnDisabled = false;
                }
            }, 1000)
        }
    }
}
</script>
<style scoped>
    .login{
        height: 100vh;
        width: 100%;
        background-color:#fff;
    }
    header{
        text-align: center;
        line-height: 44px;
        height:44px;
        font-size:16px;
        position: relative;
        border-bottom: 1px solid #ddd;
    }
    .back-btn{
        position: absolute;
        left:15px;
        top:0;
    }
    .form{
        padding: 0 40px;
    }
    h1{
        font-size: 20px;
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        margin-top: 20px;
    }
    .input-wrapper{
        margin-top:20px;
        position: relative;
    }
    .cube-input{
        margin-left:35px;
    }
    .input-wrapper i{
        font-size: 30px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .cube-btn{
        margin-top:20px;
    }
</style>
